<template>

  <div>

    <el-form ref="postForm" :model="postForm" label-position="left" label-width="100px">

      <el-form-item label="监考方式">
        <el-radio-group v-model="postForm.watchType" size="small">
          <el-radio label="1">指定人员</el-radio>
          <el-radio label="2">部门监考老师</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-if="postForm.watchType === '1'" label="监考老师">
        <el-tag
          v-for="user in postForm.userList"
          :key="user.id"
          style="margin-right: 8px; margin-bottom: 8px"
          closable
          @close="removeUser(postForm.userList, user.id)">
          {{ user.realName }}
        </el-tag>
        <el-button size="mini" type="primary" icon="el-icon-plus" @click="showAddUser('users')">添加人员</el-button>
        <el-button v-if="postForm.userList && postForm.userList.length > 0" size="mini" type="danger" icon="el-icon-delete" @click="clearAllUser">移除所有</el-button>
      </el-form-item>


      <el-form-item label="监考管理员">
        <el-tag
          v-if="postForm.manager"
          style="margin-right: 8px;">
          {{ postForm.manager_dictText }}
        </el-tag>
        <el-button size="mini" type="danger" icon="el-icon-edit" @click="showAddUser('manager')">选择人员</el-button>
      </el-form-item>


    </el-form>


    <user-select-dialog
      :dialog-show.sync="dialogVisible"
      :excludes="excludes"
      :user-type="2"
      :roles="['invigilator']"
      @select="userSelected"
    />

  </div>

</template>

<script>
import UserSelectDialog from '@/views/admin/sys/user/components/UserSelectDialog.vue'

export default {
  name: 'WatchSettings',
  components: { UserSelectDialog },
  props: {
    value: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },

  data() {
    return {
      dialogVisible: false,
      excludes: [],
      postForm: {
        // 监考方式
        watchType: '1',
        userList: []
      },
      manager: {},
      addType: ''
    }
  },
  watch: {
    // 检测查询变化
    value: {
      handler() {
        this.fillData()
      }
    },
    // 检测查询变化
    postForm: {
      handler(val) {
        this.$emit('input', val)
      },
      deep: true
    },
    'postForm.watchType': {
      handler(val) {
        if (val === '2') {
          this.clearAllUser()
        }
      }
    },
    // 检测查询变化
    'postForm.userList': {
      handler() {
        this.genExecutes()
      },
      deep: true
    }
  },
  created() {
    this.fillData()
  },
  methods: {

    // 数据回填
    fillData() {
      if (this.value) {
        this.postForm = this.value
        this.genExecutes()
      }
    },

    // 构建排除
    genExecutes() {
      const list = this.postForm.userList
      if (list && list.length>0) {
        const ids = []
        for (let i = 0; i<list.length; i++) {
          ids.push(list[i].id)
        }
        this.excludes = ids
      } else {
        this.excludes = []
      }
    },

    // 移除单个用户
    removeUser(list, id) {
      for (let i = list.length - 1; i >= 0; i--) {
        if (list[i].id === id) {
          list.splice(i, 1)
        }
      }
      this.genExecutes()
    },

    // 添加到用户列表
    userSelected(ids, objs) {
      if (this.addType === 'manager') {
        if (objs && objs.length > 0) {
          const last = objs.pop()
          this.postForm.manager = last.id
          this.postForm.manager_dictText = last.realName
        }
        return
      }

      // 如果为空，则初始化一个
      if (!this.postForm.userList) {
        this.$set(this.postForm, 'userList', [])
      }

      const list = this.postForm.userList
      if (objs && objs.length > 0) {
        for (let i = 0; i<objs.length; i++) {
          list.push(objs[i])
        }
      }

      this.$forceUpdate()
    },

    // 打开用户选择框
    showAddUser(addType) {
      this.addType = addType
      this.dialogVisible = true
    },

    // 移除自定义用户
    clearAllUser() {
      // 整卷批阅
      this.postForm.userList = []
    }
  }
}
</script>

<style scoped>
::v-deep .el-card__header{
  padding: 8px 15px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}

::v-deep .el-alert__content{
  line-height: 20px;
  padding: 0;
}

</style>
